<template>
	<view class="content">
		<view style="margin-left: 10px; margin-right: 10px;margin-top: 10px;">
			<u-search placeholder="快速查找你的需求" :height="68" :searchIconSize="40"></u-search>
		</view>
		<view style="margin-top: 30rpx;">
			<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
			<view class="u-demo-block">
				<u-swiper :list="bannerList" height="300" previousMargin="30" nextMargin="30" showTitle circular
					:autoplay="true" radius="5" bgColor="#ffffff"></u-swiper>
			</view>
			<!-- #endif -->
		</view>

		<u-grid :border="false" @click="gridClick">
			<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="60"></u-icon>
				<text class="grid-text">{{baseListItem.title}}</text>
			</u-grid-item>
		</u-grid>

		<view
			style="height: 300;display: flex;flex-direction: row;margin-top: 30rpx;background-color: lightgray;padding: 30rpx;">
			<view style="background-color: seagreen; flex:1;margin-right: 30rpx;border-radius: 30rpx;padding: 30rpx;">
				<u--text text="零工市场" size="32" color="white"></u--text>
				<view
					style="margin-top: 20rpx;border: 1px solid #ffffff;border-radius: 30rpx;padding: 6rpx 10rpx 6rpx 10rpx; color: #ffffff;font-size: 12px;">
					线上零工找活服务平台
				</view>
			</view>

			<view
				style="background-color: seagreen; flex:1;border-radius: 30rpx;padding: 30rpx;background-color: blue;">
				<u--text text="寻人寻物" size="32" color="white"></u--text>
				<view
					style="margin-top: 20rpx;border: 1px solid #ffffff;border-radius: 30rpx;padding: 6rpx 10rpx 6rpx 10rpx; color: #ffffff;font-size: 12px;">
					寻人寻物免费服务平台
				</view>
			</view>

		</view>
		
		<view style="background-color: aqua; margin: 10px; padding: 10px;border-radius: 10px;">
			
			<u--text text="温馨食尚 来去思明" bold size="28" color="white"></u--text>
			<view style="margin-top: 6px;">
						<u--text text="500元消费券" bold size="28" color="white"></u--text>
			</view>
			
			<view style="margin-top: 6px; background-color: aliceblue; width: 70px;font-size: 14px;border-radius: 6px;text-align: center;">
				点击领取
			</view>
				
		</view>
		
		<!-- 热销商品 -->
		<view style="margin-top: 10px;">
			<view style="margin-left: 10px;">
					<u--text text="热销商品" color="red" size="32" bold></u--text>
			</view>
			
			<view style="display: flex;flex-direction: row;flex-wrap: wrap;padding: 16px">
				<view v-for="(item,index) in productList" style="margin-bottom: 10px;"> 
					<view :style="{marginRight:index % 2 == 0 ? '20px' : '0'}">
						<img :src="item.img" style="height: 120px;width: 180px;" alt="">
						<u-text :text="item.title" color="#333333" bold size="28"></u-text>
						<u-text :text="item.price" color="#F4627F" bold size="28"></u-text>
					</view>
				</view>
			</view>
		</view>


		<view style="background-color: lightgray;padding: 10rpx;margin-top: 30rpx;">
			<view>
				<view v-for="(item,inx ) in shfwList" :key="inx" style="margin-bottom: 10px; background-color: #ffffff;padding: 10px;border-radius: 10px;">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<u-avatar size="60" src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
						<view
							style=" margin-left: 10px;margin-right: 10px; background-color: crimson;color:#ffffff;font-size: 12px;text-align: center;height: 20px;line-height: 20px;padding-left: 6px;padding-right: 6px;border-top-right-radius: 12px;border-bottom-left-radius: 12px;">
							{{item.module}}
						</view>
						<u--text :text="item.realname"></u--text>
					
						<u--text :text="item.createTime"></u--text>
					</view>

		
					<view v-if="item.labels.length > 0" style="display: flex;flex-direction: row;margin-top: 10px;">
						<view
							v-for="(itemLabel,inxLabel) in item.labels"
							style=" background-color: skyblue;color:#ffffff;font-size: 12px;text-align: center;height: 20px;line-height: 20px;padding-left: 6px;padding-right: 6px;border-radius: 6px;">
							{{itemLabel}}
						</view>
	
					</view>

					<view style="display: flex;font-size: 14px;margin-top: 6px;">
						<view type="warning" style="color: brown;">兼职类别：</view>
						<view type="warning">{{item.cate}}</view>
					</view>

					<view style="margin-top: 6px;">
						{{item.brief}}
					</view>

					<view style="margin-top: 10px;">
						<u--text text="查看详情"></u--text>
					</view>

					<view style="margin-top: 10px; display: flex;">
						<u--text prefixIcon="tags" iconStyle="30px" :text="item.address"></u--text>

						<u--text :text="`距你:${item.dis}`" align="right"></u--text>
					</view>


					<view style="margin-top: 6px;">
						<u--text text="100人查看      20次转发      "></u--text>
					</view>
				</view>
				
				
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				baseList: [{
						name: 'photo',
						title: '生活服务'
					},
					{
						name: 'lock',
						title: '晋城特产'
					},
					{
						name: 'star',
						title: '淘好货'
					},
				],
				productList: [
					{
						"img": "https://img2.baidu.com/it/u=3050049438,101132539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=400",
						"title": "晋宝绿珍红薯粉条",
						"price": "26.9元"
					},
					{
						"img": "https://img2.baidu.com/it/u=3050049438,101132539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=400",
						"title": "晋宝绿珍红薯粉条",
						"price": "26.9元"
						
					},
					{
						"img": "https://img2.baidu.com/it/u=3050049438,101132539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=400",
						"title": "晋宝绿珍红薯粉条",
						"price": "26.9元"
					},
					{
						"img": "https://img2.baidu.com/it/u=3050049438,101132539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=400",
						"title": "晋宝绿珍红薯粉条",
						"price": "26.9元"
					}
				],
				shfwList : [
					{
						"avatar": "https://cdn.uviewui.com/uview/album/1.jpg",
						"module": "维修服务",
						"realname": "张三",
						"createTime": "2023-10-12 12:00:12",
						"labels": [],
						"cate": "家具维修",
						"brief": "免费上门，做预算，沙发测量尺寸，优惠特价中，欢迎各大新老客户来电咨询！...",
						"address": "高平米山米东村",
						"dis": "500米"
					},
					{
						"avatar": "https://cdn.uviewui.com/uview/album/1.jpg",
						"module": "全职招聘",
						"realname": "李四",
						"createTime": "2023-10-13 12:00:12",
						"labels": [],
						"cate": "家政保安",
						"brief": "秀云家政开业20年，有丰富的经验，培训一批优秀的保姆，欢迎来我公司找人。",
						"address": "高平米山米西村",
						"dis": "500米"
					},
					{
						"avatar": "https://cdn.uviewui.com/uview/album/1.jpg",
						"module": "上门回收",
						"realname": "张五",
						"createTime": "2023-10-14 12:00:12",
						"labels": [],
						"cate": "其它回收",
						"brief": "上门高价回收三轮四轮电动车。",
						"address": "高平米山米西村",
						"dis": "500米"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			gridClick() {}
		}
	}
</script>

<style lang="scss">
	.content {}
</style>